<template>
  <!-- 物料收发明细表 -->
  <div class="content">
    <div class="header">
      <search
        :options="selectData"
        :search-son="searchSon"
        :msg="tacitly"
        @seek="collect"
        @hand="handleGetUntreated"
      />
      <el-button
        type="primary"
        size="mini"
        class="btn"
        @click="handleGetUntreated"
      >
        {{ $t('btn.search') }}
      </el-button>
      <el-button class="btn1" type="primary" size="mini" @click="handleExport">{{ $t('btn.toExcel') }}</el-button>
    </div>
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        serial
        sortable
        :get-summaries="getSummaries"
        show-summary
      >
        <!--    物料编码    -->
        <template v-slot:orderSlot="col">
          <el-link type="primary" @click="jumpMateriel(col.scope.row)">
            {{ col.scope.row.FNUMBER }}
          </el-link>
        </template>
      </jc-table>
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="handleGetUntreated"
      />
    </div>
  </div>
</template>

<script>
import {
  queryStockQtylogList
} from '@/api/repertory/forthwith'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'

export default {
  components: {
    search
  },
  mixins: [searData],
  props: {
    fnumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ftype: 95,
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      // 表头
      tableData: [], // 销售数据
      tableHeight: '73vh',
      tableHeader: [
        { label: this.$t('shop.fmodel'), prop: 'FMODEL', minWidth: '120' },
        { label: this.$t('shop.fnumber1'), type: 'order', prop: 'FNUMBER', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'FMATERIALNAME', minWidth: '120' },
        { label: this.$t('shop.specifica'), prop: 'FSPECIFICATION', minWidth: '150px' },
        { label: this.$t('market.orderDate1'), prop: 'FDATE', minWidth: '120' },
        { label: this.$t('market.approveDate'), prop: 'FCREATETIME', minWidth: '120' },
        { label: this.$t('market.ordername'), prop: 'billtypeStr', width: '120' },
        { label: this.$t('market.billNo'), prop: 'FROMBILLNO', minWidth: '120' },
        { label: this.$t('market.salKhddh'), prop: 'customerBillNo', minWidth: '120' },
        { label: this.$t('market.stock2'), prop: 'CTOCKNAME', width: '150' },
        { label: this.$t('market.stockUnit'), prop: 'UNITNAME', width: '100' },
        { label: this.$t('market.beginNum'), prop: 'FORIQTY', align: 'right', width: '100px' },
        { label: this.$t('market.inQty'), prop: 'faddQty', align: 'right', width: '100px' },
        { label: this.$t('market.outQty'), prop: 'freduceQty', align: 'right', width: '100px' },
        { label: this.$t('market.resultQty'), prop: 'fupdateQty', align: 'right', width: '100px' }
      ],
      tableHeader1: []
    }
  },
  watch: {
    fnumber: {
      handler(val) {
        this.proVal.fnumber = val
        this.handleGetUntreated()
      }
    }
  },
  created() {
    this.tableHeader1 = this.tableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 250px)' : '70vh'
  },
  methods: {
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.tableHeader.map((res) => {
          return res.label
        })
        const filterVal = this.tableHeader.map((res) => {
          return res.prop
        })
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          const { fstockId, startTime, endTime, fmaterialId, fnumber, stockname } = this.proVal
          queryStockQtylogList({
            pageSize: 100000,
            pageNum: 1,
            fstockId, startTime, endTime, fmaterialId, fnumber, stockname
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.list
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '物料收发明细表')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 获取物料收发明细表数据
    async handleGetUntreated(ev) {
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        search: this.searCollData.concat(this.details)
      }
      const RES = await queryStockQtylogList(DATA)
      this.tableData = RES.data.list
      this.total = RES.data.total
    },
    // 搜索
    handleQuerySonClass(ev) {
      this.currentPage = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.handleGetUntreated(ev.detail)
      } else {
        this.handleGetUntreated()
      }
    },
    // 进入物料详情
    jumpMateriel(ev) {
      const FNUMBER = ev.FNUMBER
      this.$router.push({ path: `/detailMateriel/${FNUMBER}` })
    },
    // 自定义合计行
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(2)
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = ''
        }
      })
      sums.forEach((res, index) => {
        if (Number(sums[index]) > 0) {
          sums[index] = Number(sums[index]).toLocaleString()
        } else {
          sums[index] = ''
        }
      })
      sums[0] = '合计'
      return sums
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  @include listBom;
  padding: 0!important;
  .header{
    position:relative;
    margin-bottom: 5px;
    .header-name{
      width: 100%;
    }
    .btn{
      transform: translateY(18%);
      margin-left: 450px !important;
    }
    .btn1{
      transform: translateY(18%);
    }
  }
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      height: 30px !important;
      width: 268px;
      margin-bottom: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .btnType {
        margin-right: 20px;
      }

      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
